<template>
  <div class="overlay-wrapper" v-if="visibleOverlay">
    <div class="inner">
      <div class="img-wrapper">
        <img :src="imgUrl" alt />
      </div>
      <span class="close" @click="close"></span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imgUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      visibleOverlay: false
    };
  },
  methods: {
    show() {
      this.visibleOverlay = true;
    },
    close() {
      this.visibleOverlay = false
    }
  }
};
</script>
<style lang="less" scoped>
.overlay-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .img-wrapper {
      width: 11.32rem;
      height: 11.32rem;
      border-radius: 0.2rem;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
    .close {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background: url("./../../assets/represent/close.png") no-repeat;
      background-size: cover;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -2rem;
    }
  }
}
</style>